<html>
<head>
	<script type="text/javascript" src="jquery.js"></script>
	<!--To otacon IGNORE IT!!-->
	<style type="text/css">
	input{
		margin-right:auto;
	}
	form{
		text-align:right;
		margin-top:70px;
		margin-right:20px;
		font-family: Verdana, Geneva, sans-serif;
		text-shadow: 2px 2px 2px gray;
		font-size: 20;
		color: #FFFFFF;
	}
	#title_name{
		text-align:right;
		text-shadow: 3px 3px 3px #000000;
		margin-bottom: 10px;
		font-size:50px;
		font-family: Verdana, Geneva, sans-serif;
		font-style:italic;
		color: gray;
	}
	#logg{
		background:url(bg2.jpg);
		-moz-background-size:100% 100%; /* Firefox 3.6 */
		background-size:100% 100%;
		background-repeat:no-repeat;
		margin-left:auto;
		margin-right:auto;
		width: 1200px;
		height: 900px;
		background-color: gray;
		border:2px solid;
		border-radius:25px;
		-moz-border-radius:25px; /* Firefox 3.6 and earlier */		
	}
	a{
		text-shadow: 1px 1px 1px #ABCDEF;
	}
	#tb{
		background-color: #abcdef;
		margin-left:auto;
		margin-right:auto;
		width: 1100px;
		height: 800px;
		border:2px solid;
		border-radius:25px;
		-moz-border-radius:25px; /* Firefox 3.6 and earlier */
	}
	#tb2{
		margin-left:auto;
		margin-right:auto;
		margin-top: 20px;
		width: 1000px;
		height: 800px;

	}
	.deck{
		width: 100px;
		border-radius:5px;
	}
	#d1{
		width: 100px;
		height: 140px;
		margin-left: -65px;
		float:left;
		z-index: 112;
		position:relative;
		border:2px solid;
	}
	#d2{
		width: 100px;
		height: 140px;
		margin-left: -65px;
		float:left;
		z-index: 111;
		position:relative;
		border:2px solid;
	}
	#d3{
		width: 100px;
		height: 140px;
		margin-left: -65px;
		float:left;
		z-index: 110;
		position:relative;
		border:2px solid;
	}
	#d4{
		width: 100px;
		height: 140px;
		margin-left: -65px;
		float:left;
		z-index: 109;
		position:relative;
		border:2px solid;
	}
	#d5{
		width: 100px;
		height: 140px;
		margin-left: -65px;
		float:left;
		z-index: 108;
		position:relative;
		border:2px solid;
	}
	#d6{
		width: 100px;
		height: 140px;
		margin-left: -65px;
		float:left;
		z-index: 107;
		position:relative;
		border:2px solid;
	}
	#d7{
		width: 100px;
		height: 140px;
		margin-left: -65px;
		float:left;
		z-index: 106;
		position:relative;
		border:2px solid;
	}
	#d8{
		width: 100px;
		height: 140px;
		margin-left: -65px;
		float:left;
		z-index: 105;
		position:relative;
		border:2px solid;
	}
	#d9{
		width: 100px;
		height: 140px;
		margin-left: -65px;
		float:left;
		z-index: 104;
		position:relative;
		border:2px solid;
	}
	#d10{
		width: 100px;
		height: 140px;
		margin-left: -65px;
		float:left;
		z-index: 103;
		position:relative;
		border:2px solid;
	}
	#d11{
		width: 100px;
		height: 140px;
		margin-left: -65px;
		float:left;
		z-index: 102;
		position:relative;
		border:2px solid;
	}
	#d12{
		width: 100px;
		height: 140px;
		margin-left: -65px;
		float:left;
		z-index: 101;
		position:relative;
		border:2px solid;
	}
	#d1:hover, #d2:hover, #d3:hover, #d4:hover, #d5:hover, #d6:hover, #d7:hover, #d8:hover, #d9:hover, #d10:hover, #d11:hover, #d12:hover{
		border: 1px;
		border-color: red;
		margin-top: -10px;
		z-index: 9999;
		position:relative;
		box-shadow: 5px 5px 5px #888888;
		-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */
		border:2px solid;
	}
	#player{
		margin-left: 300px;
		margin-top: 620px;
		position:absolute;

	}
	#player_name{
		margin-left: -50;
		margin-top: -70;
		text-shadow: 2px 2px 2px #000000;
		font-size:25px;
		font-family: Verdana, Geneva, sans-serif;
		font-style:italic;
		color: gray;
		position:absolute;
	}
	#player_card_m{
		height: 110;
		border-radius:5px;
		-moz-border-radius:5px; /* Firefox 3.6 and earlier */
		position:absolute;
		margin-left: -310px;
		margin-top: -120px;
		border:2px solid;
	}
	#player_level_m{
		height: 140;
		border-radius:5px;
		-moz-border-radius:5px; /* Firefox 3.6 and earlier */
		position:absolute;
		margin-left: 20px;
		border:2px solid;
	}
	#player_pool{
		position:absolute;
		margin-top: -35px;
		margin-left: -50px;
	}
	.usr_deck{
		height: 110;
		border-radius:5px;
		-moz-border-radius:5px; /* Firefox 3.6 and earlier */
		position:absolute;
	}
	.usr_card{
		height: 110;
		border-radius:5px;
		-moz-border-radius:5px; /* Firefox 3.6 and earlier */
		position:absolute;
		margin-left: 70px;
		margin-top: -150px;
		border:2px solid;
	}
	.usr_level{
		height: 110;
		border-radius:5px;
		-moz-border-radius:5px; /* Firefox 3.6 and earlier */
		position:absolute;
		margin-left: 200px;
		border:2px solid;
	}
	.usr_name{
		margin-left: 0;
		margin-top: -55;
		text-align:left;
		text-shadow: 1px 1px 1px #000000;
		font-size:20px;
		font-family: Verdana, Geneva, sans-serif;
		font-style:italic;
		color: gray;
	}
	.usr_pool{
		position:absolute;
		margin-top: -30px;
		margin-left: 0px;
	}
	#usr1{
		width: 500px;
		height: 140px;
		margin-top:430px;
		margin-left:-250px;
		position:absolute;
		transform: rotate(90deg);
		-ms-transform: rotate(90deg); /* IE 9 */
		-webkit-transform: rotate(90deg); /* Safari and Chrome */
		-o-transform: rotate(90deg); /* Opera */
		-moz-transform: rotate(90deg); /* Firefox */
	}
	#usr2{
		width: 500px;
		height: 140px;
		margin-top:150px;
		margin-left:750px;
		position:absolute;
		transform: rotate(-90deg);
		-ms-transform: rotate(-90deg); /* IE 9 */
		-webkit-transform: rotate(-90deg); /* Safari and Chrome */
		-o-transform: rotate(-90deg); /* Opera */
		-moz-transform: rotate(-90deg); /* Firefox */
	}

	#usr3{
		width: 500px;
		height: 140px;
		margin-top:-40px;
		margin-left:140px;
		position:absolute;
		transform: rotate(180deg);
		-ms-transform: rotate(180deg); /* IE 9 */
		-webkit-transform: rotate(180deg); /* Safari and Chrome */
		-o-transform: rotate(180deg); /* Opera */
		-moz-transform: rotate(180deg); /* Firefox */
	}

	#usr3_5{
		width: 500px;
		height: 140px;
		margin-top:-40px;
		margin-left:-100px;
		position:absolute;
		transform: rotate(180deg);
		-ms-transform: rotate(180deg); /* IE 9 */
		-webkit-transform: rotate(180deg); /* Safari and Chrome */
		-o-transform: rotate(180deg); /* Opera */
		-moz-transform: rotate(180deg); /* Firefox */
	}
	
	#usr4{
		width: 500px;
		height: 140px;
		margin-top:-40px;
		margin-left:310px;
		position:absolute;
		transform: rotate(180deg);
		-ms-transform: rotate(180deg); /* IE 9 */
		-webkit-transform: rotate(180deg); /* Safari and Chrome */
		-o-transform: rotate(180deg); /* Opera */
		-moz-transform: rotate(180deg); /* Firefox */
	}

	.pool_img{
		height: 240;
		border: 2px solid;
		border-radius:25px;
		-moz-border-radius:25px; /* Firefox 3.6 and earlier */
		position:absolute;
	}
	
	#pool1{
		margin-left:250px;
		margin-top:260px;
		position:absolute;
	}
	#pool2{
		margin-left:570px;
		margin-top:260px;
		position:absolute;
	}
	#game_info{
		margin-left:900px;
		margin-top:710px;
		width: 200px;
		height: 100px;
		position:absolute;
		font-family: Verdana, Geneva, sans-serif;
		text-shadow: 2px 2px 2px black;
		color: #FFFFFF;
		background-color: gray;
		border:2px solid;
		border-radius:25px;
		-moz-border-radius:25px; /* Firefox 3.6 and earlier */
	}
	#round_counter{
		margin-left:20px;
		margin-top:20px;
		position:related;
	}
	#turn_counter, #time_counter{
		margin-left:20px;
		position:related;
	}
	</style>
	<!--To otacon IGNORE IT END!!-->
	<title>Game</title>
</head>
<body>
<div id=logg>
<div id=title_name>
Turn the Tide Online
</div>
<div id=tb>
<div id=tb2>
<!--
TODO: update the div
Player's DIV id: player
other user's DIV: usr1, usr2, usr3, usr3_5(<-for 5 people game), usr4
player/usr have a postfix call _deck for the card they take...
inside player and usr div will have a postfix _level for the water level card(you can use jQuery to hide it)

it also have a _card postfix for display which card the usr/player use

_text is the pool remain

if 3 people game hide div usr3 usr3_5 usr4
if 4 people game hide div usr3_5 usr4
if 5 people game hide div usr_3
-->

<!--player-->
<div id=player>
	<div id=player_name>
		Unknow
	</div>
	<div id=player_pool>
		<img src="other/pool.png" /><img src="other/pool.png" /><img src="other/pool.png" /><img src="other/pool.png" />
	</div>
	<div id=player_deck>
		<div id=d1 class=deck>
			<img class=deck src="tenki/1.jpg" />
		</div>
		<div id=d2 class=deck>
			<img class=deck src="tenki/11.jpg" />
		</div>
		<div id=d3 class=deck>
			<img class=deck src="tenki/21.jpg" />
		</div>
		<div id=d4 class=deck>
			<img class=deck src="tenki/24.jpg" />
		</div>
		<div id=d5 class=deck>
			<img class=deck src="tenki/30.jpg" />
		</div>
		<div id=d6 class=deck>
			<img class=deck src="tenki/32.jpg" />
		</div>
		<div id=d7 class=deck>
			<img class=deck src="tenki/41.jpg" />
		</div>
		<div id=d8 class=deck>
			<img class=deck src="tenki/47.jpg" />
		</div>
		<div id=d9 class=deck>
			<img class=deck src="tenki/50.jpg" />
		</div>
		<div id=d10 class=deck>
			<img class=deck src="tenki/51.jpg" />
		</div>
		<div id=d11 class=deck>
			<img class=deck src="tenki/57.jpg" />
		</div>
		<div id=d12 class=deck>
			<img class=deck src="tenki/60.jpg" />
		</div>
	</div>
	<div id=player_card>
		<img id=player_card_m src="tenki/60.jpg" />
	</div>
	<div id=player_level>
		<img id=player_level_m src="pool/12.jpg" />
	</div>
</div>

<!--
TODO:
All thing of the left one us under here...
_deck is the 12 card div...you need to change the img inside if the user use card...
card are in other 1.jpg~12.jpg

_card if the tenki card user use....
there is 1.jpg~60.jpg in tenki/

_level is the water level the user get...
there is 1.jpg~12.jpg in pool/
-->
<div id=usr1>
	<div id=usr1_deck>
		<img class=usr_deck src="other/12.jpg" />
	</div>
	<div id=usr1_card>
		<img class=usr_card src="tenki/60.jpg" />
	</div>
	<div id=usr1_level>
		<img class=usr_level src="pool/12.jpg" />
	</div>
	<div id=usr1_count class=usr_pool>
		<img src="other/pool.png" /><img src="other/pool.png" /><img src="other/pool.png" /><img src="other/pool.png" />
	</div>
	<div id=usr1_name class=usr_name>
		Peter
	</div>
</div>

<!--
All things of the right one under here...
about the same as usr1...
-->
<div id=usr2>
	<div id=usr2_deck>
		<img class=usr_deck src="other/12.jpg" />
	</div>
	<div id=usr2_card>
		<img class=usr_card src="tenki/60.jpg" />
	</div>
	<div id=usr2_level>
		<img class=usr_level src="pool/12.jpg" />
	</div>
	<div id=usr2_count class=usr_pool>
		<img src="other/pool.png" /><img src="other/pool.png" /><img src="other/pool.png" />
	</div>
	<div id=usr2_name class=usr_name>
		Derek
	</div>
</div>
<!--
This one is for 4 player!!
-->
<!--
TODO:for 4 player you need to enable this for 5 player you need to disable it
-->
<!--
<div id=usr3>
	<div id=usr3_deck>
		<img class=usr_deck src="other/12.jpg" />
	</div>
	<div id=usr3_card>
		<img class=usr_card src="tenki/60.jpg" />
	</div>
	<div id=usr3_level>
		<img class=usr_level src="pool/12.jpg" />
	</div>
	<div id=usr3_count class=usr_pool>
		<img src="other/pool.png" /><img src="other/pool.png" /><img src="other/pool.png" /><img src="other/pool.png" /><img src="other/pool.png" /><img src="other/pool.png" /><img src="other/pool.png" /><img src="other/pool.png" />
	</div>
	<div id=usr3_name class=usr_name>
		Bill
	</div>
</div>
-->
<!--
below 2 is for 5 player
about the same as usr1...
-->
<div id=usr3_5>
	<div id=usr3_5_deck>
		<img class=usr_deck src="other/12.jpg" />
	</div>
	<div id=usr3_5_card>
		<img class=usr_card src="tenki/60.jpg" />
	</div>
	<div id=usr3_5_level>
		<img class=usr_level src="pool/12.jpg" />
	</div>
	<div id=usr3_5_count class=usr_pool>
		<img src="other/pool.png" />
	</div>
	<div id=usr1_name class=usr_name>
		Bill
	</div>
</div>
<div id=usr4>
	<div id=usr4_deck>
		<img class=usr_deck src="other/12.jpg" />
	</div>
	<div id=usr4_card>
		<img class=usr_card src="tenki/60.jpg" />
	</div>
	<div id=usr4_level>
		<img class=usr_level src="pool/12.jpg" />
	</div>
	<div id=usr4_count class=usr_pool>
		<img src="other/pool.png" /><img src="other/pool.png" /><img src="other/pool.png" /><img src="other/pool.png" />
	</div>
	<div id=usr4_name class=usr_name>
		Jeck
	</div>
</div>
<div id=pool1>
	<img class=pool_img src="pool/1.jpg">
</div>
<div id=pool2>
	<img class=pool_img src="pool/2.jpg">
</div>

<!--TODO
Update the current info here...
-->
<div id=game_info>
	<div id=round_counter>
	Round : 1
	</div>
	<div id=turn_counter>
	Turn : 1
	</div>
	<div id=time_counter>
	Time remain : 30s
	</div>
</div>
</div>
</div>
</div>
</body>
</html>
